import React, {useEffect, useState} from "react";
import {Button, Checkbox, Col, Drawer, Form, Input, InputNumber, message, Radio, Row, Select, Space, Spin} from "antd";
import {PermissionInfoProp, UpdatePermissionFormProp, UpdatePermissionProp} from "@/pages/authority/modules";
import {permissionCreate, permissionInfo, permissionUpdate} from "@/api/permission";
import {IconKeys} from "@/components/Icon";
import {Icon} from "@/components";


const UpdatePermission: React.FC<UpdatePermissionProp> = ({id, visible, close}) => {

    const [spinning, setSpinning] = useState<boolean>(false);
    const [form] = Form.useForm<UpdatePermissionFormProp>();
    const [types, setTypes] = useState<number>(1);
    const submitForm = () => {
        form.validateFields().then( async value => {
            const result = await permissionUpdate({...value, id: id, permType: types});
            message.success("修改成功");
            close(true, result);
        })
    }

    const loadInfo = async (id: number) => {
        const info = await permissionInfo(id);
        setTypes(info.level);
        form.setFieldsValue({
            id: info.id,
            name: info.name,
            code: info.code,
            parentId: info.parentId,
            icon: info.icon,
            path: info.path,
            brief: info.brief,
            permType: info.permType,
            orderNo: info.order,
        })
    }

    useEffect(() => {
        if (visible) {
            loadInfo(id);
        }
        return () => {
            form.resetFields()
        }
    },  [visible])

    return <Drawer
        width={500}
        title="用户修改"
        placement="right"
        onClose={() => close(false)}
        open={visible}
        extra={
            <Space>
                <Button type="primary" danger onClick={()=> close(false)}>取消</Button>
                <Button type="primary" onClick={() => submitForm()}>保存</Button>
            </Space>
        }
    >
        <Spin tip="加载中......" spinning={spinning}>
            <Form labelCol={{ span: 4 }}
                  wrapperCol={{ span: 20 }}
                  form={form}
                  layout="horizontal"
                  name="form_in_modal"
            >
                <Form.Item name="name" label="名称" rules={[{ required: true, message: '请输入资源名称' }]}>
                    <Input placeholder="请输入资源名称" />
                </Form.Item>
                <Form.Item name="code" label="编码" rules={[{ required: true, message: '请输入资源编码' }]}>
                    <Input placeholder="请输入资源编码" />
                </Form.Item>
                {/* 目录 */}
                {types === 1 &&  <Form.Item name="icon" label="图标" rules={[{ required: true, message: '请输入选择图标' }]}>
                    <Select
                        popupClassName="select-icon"
                        placeholder="custom dropdown render"
                    >
                        {IconKeys.map((item) => <Select.Option key={item}>
                            <span style={{float: "left"}}>{ item }</span>
                            <span style={{float: 'right'}}><Icon icon={item} /></span>
                        </Select.Option>)}
                    </Select>
                </Form.Item>}
                {types === 2 &&  <Form.Item name="path" label="路径" rules={[{ required: true, message: '请输入菜单路径' }]}>
                    <Input placeholder="请输入菜单路径" />
                </Form.Item>}
                <Form.Item name="orderNo" label="权重" initialValue={1} style={{width: '100%'}} rules={[{ required: true, message: '请输入权限值' }]}>
                    <InputNumber min={1} placeholder="请输入权限值" />
                </Form.Item>
                <Form.Item name="desc" label="备注">
                    <Input.TextArea rows={3} placeholder="请输入用户备注" />
                </Form.Item>
            </Form>
        </Spin>
    </Drawer>
}

export default UpdatePermission;